<!--
 * @Author: 叫我龟先生 yyxxkahhh@163.com
 * @Date: 2022-09-21 19:19:38
 * @LastEditors: 叫我龟先生 yyxxkahhh@163.com
 * @LastEditTime: 2022-09-21 20:30:04
 * @FilePath: \vue-02\src\作业1.买书.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <p>请选择你要购买的书籍</p>
    <ul>
        <li v-for="(item,index) in arr" :key="index">
            <span>{{item.name}}</span>
            <button @click="btnFn(index)">点击购买</button>
        </li>
    </ul>
    <table border="1" width="500" cellspacing="0">
      <tr>
        <th>序号</th>
        <th>书名</th>
        <th>单价</th>
        <th>数量</th>
        <th>合计</th>
      </tr>
      <tr v-for="(item,index) in arr" :key="index">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.count}}</td>
        <td>{{item.count*item.price}}</td>
      </tr>
    </table>
    <p>总价格为: {{isAll}}</p>
  </div>
</template>

<script>
// 先把数据渲染进去，遍历√
//ul里遍历，把书名列出来，添加点击事件√
//点击事件里，每点击一次，数量都会加一
//总价格这里设置一个变量，competed里边做计算
//用reduce把总价加起来
export default {
  data() {
    return {
      arr: [
        {
          name: "水浒传",
          price: 107,
          count: 0,
        },
        {
          name: "西游记",
          price: 192,
          count: 0,
        },
        {
          name: "三国演义",
          price: 219,
          count: 0,
        },
        {
          name: "红楼梦",
          price: 178,
          count: 0,
        },
      ],
    };
  },
  methods: {
    btnFn(index){
        this.arr[index].count += 1
        // console.log(index);
    }
  },
  computed:{
    isAll() {
        return this.arr.reduce(function(sum,item){
            return (sum += item.price*item.count)
        },0)
    }
  }
};
</script>
<style>

</style>